<template>
	<view class="curentPage">
		<u-navbar title="公共聊天室" is-back="false" back-icon-color='#ffffff' :background="{backgroundImage: 'linear-gradient(45deg, #41d8dd, #5583ee)'}"
		 title-color="#ffffff">
				<slot slot='right'><view class="" style="color: #FFFFFF;">在线{{onlineCount || 0}}人</view></slot>
		 </u-navbar>

		<!-- <scroll-view scroll-y="true" id="scrollview"> -->
			<view class="msg-list">
				<view class="show-msg m-item" v-for="item in msg_list" :class="class_style(item)">
					<view class="inner-show">
						{{item.msg}}
					</view>
					<image src="../../static/center-selected.png" mode="" v-if="item.type =='user'"></image>
				</view>
			</view>
		<!-- </scroll-view> -->
		<view class="edit-msg">
			<textarea value="" placeholder="" maxlength="-1" :auto-height='true' v-model="user_msg" /><button type="primary" @tap='send' :disabled="user_msg == ''?true:false">发送</button>
		</view>
		
		<!-- <u-popup v-model="show"  mode="center" border-radius="14" width="500rpx" height="500rpx" :closeable='true' @close="closePopup">
			<view class="popup">
				<view class="welcome">欢迎!</view>
				<view class="text" >请在下面输入你的昵称</view>
				<view class="input">
					<input type="text" value="" maxlength="12" v-model="nickName"/>
				</view>
				<button class="btn" :disabled=" nickName == '' ? true :false" @tap='confirm' type="primary">确认</button>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// show:false,
				nickName:"",
				msg_list:[],
				user_msg:"",
				onlineCount:0
			
			};
		},
		onLoad() {
			
			//获取当前账户昵称或者用户名
			this.nickName = uni.getStorageSync('user')
			this.socket.emit('user_reg',this.nickName)
			// this.show = true
			this.getSysMsg()
			this.getUserMsg()
		},
	
		computed:{
		
		},
		methods:{
			//给元素动态添加类
			class_style:function(item){
				if(item.type == 'sys') return 'sys_msg'
				if(item.user == this.nickName){return 'right'}else{return 'left'}
				
			},
			closePopup(){
				if(this.nickName == ""){
					uni.navigateBack()
				}
			},
			//发送消息
			send(){
				
				console.log(this.nickName,this.user_msg)
				this.socket.emit('user_msg',{user:this.nickName,msg:this.user_msg})
				this.user_msg = ""
			},
		
			getSysMsg(){
				this.socket.on('sys_msg',(data,onlineCount)=>{
				
					console.log('系统消息',data,onlineCount)
					this.onlineCount = onlineCount
					this.msg_list.push(data)
					
				})
			},
			getUserMsg(){
				this.socket.on('user_msg',data=>{
					this.msg_list.push(data)
					console.log('用户消息',data)
					　
				})
			},
			
		},
		mounted() {
		
		}
	}
</script>

<style lang="scss" scoped>
	.curentPage{
		background-color:rgba(234,237,244,.6);
		min-height: calc(100vh - 80rpx);
		// padding-bottom: 15rpx;
		// border: 1px solid;
		
	}
	.edit-msg{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0 18rpx 18rpx 18rpx;
		// min-height: 150rpx;
		// padding: 15rpx;
		
		background:#F4F4F5 ;
		display: flex;
		justify-content: space-between;
		textarea{
			min-height: 60rpx;
			line-height: 60rpx;
			border: 1px solid #909399;
			border-radius: 10rpx;
			text-indent: 20rpx;
			background: #FFFFFF;
			width: 600rpx;
			
		}
		button{
			height: 64rpx;
			line-height: 64rpx;
			font-size: 24rpx;
			// padding: 8rpx 15rpx;
			// margin: auto;
		}
	}
	.popup{
		text-align: center;
		padding: 15rpx 20rpx;
		.welcome{
			padding: 15rpx;
			font-size: 32rpx;
			font-weight: 700;	
		}
		.input{
			input{
				border-bottom: 1px solid #c8c9cc;
				padding: 10rpx 0;
				margin: 0 15rpx;
			}
		}
		.btn{
			width: 80%;
			// background: #2979FF;
			height: 60rpx;
			border-radius: 10rpx;
			line-height: 60rpx;
			margin: 100rpx auto;
			color: #FFFFFF;
			font-size: 28rpx;
		}
	}
	.show-msg{
		min-height: 35rpx;
		line-height: 35rpx;
		display: flex;
		image{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			border: 1px solid;
		}
		
		
		
		
	}
	.sys_msg{
		text-align: center;
		.inner-show{
			padding: 20rpx;	
			width: 100%;
		}
	}
	.right{
		// text-align: right;
		display: flex;
		flex-direction: row-reverse;
		margin: 0 100rpx 15rpx 0;
		position: relative;
		.inner-show{
			// border: 1px solid;
			padding: 20rpx;
			max-width: 80%;
			word-wrap: break-word;
			word-break: break-all;
			overflow: hidden;
			background: rgb(161,216,253);
			border-radius: 15rpx;
			
		}
		image{
			position: absolute;
			right: -80rpx;
		}
		
	}
	.left{
		text-align: left;
		display: flex;
		margin: 0 0 15rpx 100rpx;
		position: relative;
		.inner-show{
			// border: 1px solid;
			padding: 20rpx;
			max-width: 80%;
			border-radius: 15rpx;
			background: #FFFFFF;
			word-wrap: break-word;
			word-break: break-all;
			overflow: hidden;
			
		}
		image{
			position: absolute;
			left: -80rpx;
		}
		
	}
</style>
